<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到我们的服务器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#22c55e', // 绿色作为主色调，符合Minecraft风格
                        secondary: '#165DFF',
                        dark: '#1e293b',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        minecraft: ['Minecraft', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .text-shadow-lg {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
            }
            .bg-blur {
                backdrop-filter: blur(8px);
            }
            .server-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .server-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .modal-backdrop {
                backdrop-filter: blur(5px);
                background-color: rgba(0, 0, 0, 0.7);
            }
        }
    </style>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-light font-inter antialiased">
    <!-- 导航栏 -->
    <header class="fixed w-full z-50 transition-all duration-300" id="navbar">
        <div class="bg-dark/80 bg-blur py-4 px-6 md:px-12">
            <div class="container mx-auto flex justify-between items-center">
                <a href="#" class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                        <i class="fa fa-cubes text-xl text-white"></i>
                    </div>
                    <span class="text-xl font-bold text-white">2CS服务器and生存服务器</span>
                </a>
                <nav class="hidden md:flex space-x-8">
                    <a href="#home" class="text-white hover:text-primary transition-colors duration-300">首页</a>
                    <a href="#servers" class="text-white hover:text-primary transition-colors duration-300">服务器</a>
                    <a href="#about" class="text-white hover:text-primary transition-colors duration-300">关于我们</a>
                    <a href="#contact" class="text-white hover:text-primary transition-colors duration-300">联系我们</a>
                </nav>
                <button class="md:hidden text-white text-2xl" id="menu-toggle">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-dark/95 bg-blur" id="mobile-menu">
            <div class="px-6 py-4 space-y-4">
                <a href="#home" class="block text-white hover:text-primary transition-colors duration-300">首页</a>
                <a href="#servers" class="block text-white hover:text-primary transition-colors duration-300">服务器</a>
                <a href="#about" class="block text-white hover:text-primary transition-colors duration-300">关于我们</a>
                <a href="#contact" class="block text-white hover:text-primary transition-colors duration-300">联系我们</a>
            </div>
        </div>
    </header>

    <!-- 首页区域 -->
    <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-gradient-to-b from-dark/50 to-dark"></div>
            <img src="images/2025-07-16_13.54.21.png" alt="Minecraft风景" class="w-full h-full object-cover">
        </div>
        <div class="container mx-auto px-6 py-24 relative z-10 text-center">
            <h1 class="text-[clamp(2.5rem,6vw,4.5rem)] font-bold text-white mb-6 text-shadow-lg">
                欢迎来到<span class="text-primary">我们的</span>服务器
            </h1>
            <p class="text-[clamp(1rem,2vw,1.5rem)] text-white/90 mb-10 max-w-3xl mx-auto text-shadow">
                探索无限可能，创造属于你的世界。加入我们的社区，与其他玩家一起冒险！
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#servers" class="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105">
                    查看服务器 <i class="fa fa-server ml-2"></i>
                </a>
                <a href="#contact" class="px-8 py-3 bg-transparent border-2 border-white hover:border-primary hover:text-primary text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105">
                    联系我们 <i class="fa fa-envelope ml-2"></i>
                </a>
            </div>
        </div>
            <div class="grid grid-cols-2 gap-10">
            <a href="#servers" class="flex flex-col items-center">
                <span class="mb-2">下滑看看</span>
                <i class="fa fa-chevron-down"></i>
            </a>
        </div>
    </section>

    <!-- 服务器介绍区域 -->
    <section id="servers" class="py-20 bg-gradient-to-b from-dark to-dark/95">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,3rem)] font-bold text-white mb-4">我们的服务器</h2>
                <p class="text-white/70 max-w-2xl mx-auto text-lg">我们拥有两个服务器。探索两个服务器，每个都有其独特的游戏体验和功能。</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-16">
                <!-- 服务器1 - 生存服务器 -->
                <div class="bg-dark/50 border border-gray-700 rounded-xl overflow-hidden server-card">
                    <div class="relative h-64">
                        <img src="images/2025-03-12_19.16.14.png" alt="生存服务器宣传图" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent"></div>
                        <div class="absolute bottom-4 left-4">
                            <span class="px-3 py-1 bg-primary text-white text-sm font-semibold rounded-full">生存服务器</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-3">2CS服务器 - 探索与冒险</h3>
                        <p class="text-white/70 mb-4">在这个充满挑战的生存服务器中，你需要收集资源、建造基地、对抗怪物，并与其他玩家合作或竞争。</p>
                        
                        <div class="space-y-3 mb-6">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4">
                                    <i class="fa fa-server text-primary"></i>
                                </div>
                                <div>
                                    <p class="text-white/50 text-sm">服务器地址</p>
                                    <p class="text-white font-medium">需加入官方群聊获取</p>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-3">
                                <div class="bg-dark/70 p-3 rounded-lg">
                                    <p class="text-white/50 text-xs">游戏版本</p>
                                    <p class="text-white font-medium">1.19+</p>
                                </div>
                                <div class="bg-dark/70 p-3 rounded-lg">
                                    <p class="text-white/50 text-xs">服务器内存</p>
                                    <p class="text-white font-medium">10GB</p>
                                </div>
                                <div class="bg-dark/70 p-3 rounded-lg">
                                    <p class="text-white/50 text-xs">存储空间</p>
                                    <p class="text-white font-medium">245/270G</p>
                                </div>
                                <div class="bg-dark/70 p-3 rounded-lg">
                                    <p class="text-white/50 text-xs">网络带宽</p>
                                    <p class="text-white font-medium">100Mbps</p>
                                </div>
                                <div class="bg-dark/70 p-3 rounded-lg col-span-2">
                                    <p class="text-white/50 text-xs">连接类型</p>
                                    <p class="text-white font-medium">FRP加速(16Mbps)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                        
                <!-- 服务器2 - 生存服务器 -->
                <div class="bg-dark/50 border border-gray-700 rounded-xl overflow-hidden server-card">
                    <div class="relative h-64">
                        <img src="images/2025-07-21_23.16.43.png" alt="生存服务器宣传图" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent"></div>
                        <div class="absolute bottom-4 left-4">
                            <span class="px-3 py-1 bg-secondary text-white text-sm font-semibold rounded-full">生存服务器</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-3">生存服务器 - 自由养老</h3>
                        <p class="text-white/70 mb-4">释放你的想象力！在这个服务器中，你可以使用无限想象来建造任何东西，展示你的建筑才华。</p>
                        
                        <div class="space-y-3 mb-6">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mr-4">
                                    <i class="fa fa-server text-secondary"></i>
                                </div>
                                <div>
                                    <p class="text-white/50 text-sm">服务器地址</p>
                                    <p class="text-white font-medium">frp1.197.72.113:55413</p>
                                </div>
                            </div>
                            
                            <div class="grid grid-cols-2 gap-3">
                                <div class="bg-dark/70 p-3 rounded-lg">
                                    <p class="text-white/50 text-xs">游戏版本</p>
                                    <p class="text-white font-medium">1.20.1</p>
                                </div>
                                <div class="bg-dark/70 p-3 rounded-lg">
                                    <p class="text-white/50 text-xs">服务器内存</p>
                                    <p class="text-white font-medium">16GB</p>
                                </div>
                                <div class="bg-dark/70 p-3 rounded-lg">
                                    <p class="text-white/50 text-xs">存储空间</p>
                                    <p class="text-white font-medium">460/464G</p>
                                </div>
                                <div class="bg-dark/70 p-3 rounded-lg">
                                    <p class="text-white/50 text-xs">网络带宽</p>
                                    <p class="text-white font-medium">200Mbps</p>
                                </div>
                                <div class="bg-dark/70 p-3 rounded-lg col-span-2">
                                    <p class="text-white/50 text-xs">连接类型</p>
                                    <p class="text-white font-medium">FRP加速(12Mbps)</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            <!-- 单独显示的运营时间板块 -->
            <div class="bg-dark/50 border border-gray-700 rounded-xl overflow-hidden p-6 mb-10">
                <div class="bg-dark/50 p-5 rounded-lg">
                    <div class="text-primary text-3xl mb-2">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <h4 class="text-white font-semibold mb-1">运营时间</h4>
                    <p class="text-white/60">1周+</p>
                    <p class="text-white/60 mt-2">腐竹很友善的，你想要什么都可以许愿哦（实在得不到），腐竹都会给的</p>
                </div>
            </div>

            <!-- 单独显示的最佳体验板块 -->
            <div class="relative mb-16">
                <img src="images/2025-07-16_13.57.43.png" alt="我的世界游戏画面" class="w-full h-auto rounded-xl shadow-2xl">
                    <div class="absolute -bottom-6 -left-6 bg-primary p-6 rounded-xl shadow-xl hidden md:block">
                        <p class="text-white font-bold text-xl">致力于尽量提供最佳游戏体验</p>
                    </div>
            </div>
        </div>
    </section>

    <!-- 联系我们区域 -->
    <section id="contact" class="py-20 bg-gradient-to-b from-dark/80 to-dark">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,4vw,3rem)] font-bold text-white mb-4">联系我们</h2>
                <p class="text-white/70 max-w-2xl mx-auto text-lg">有任何问题或建议？欢迎随时联系我们</p>
            </div>

            <div class="max-w-4xl mx-auto bg-dark/50 border border-gray-700 rounded-xl p-8 md:p-12">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                    <div>
                        <h3 class="text-xl font-bold text-white mb-6">联系信息</h3>
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4 shrink-0">
                                    <i class="fa fa-envelope text-primary"></i>
                                </div>
                                <div>
                                    <h4 class="text-white font-medium mb-1">腐竹邮箱</h4>
                                    <p class="text-white/70">
                                        1服: 3458214934@qq.com<br>
                                        2服: 2835209144@qq.com
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-xl font-bold text-white mb-6">社交链接</h3>
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4 shrink-0">
                                    <i class="fa fa-qq text-primary"></i>
                                </div>
                                <div>
                                    <h4 class="text-white font-medium mb-1">QQ群聊</h4>
                                    <button id="qq-group-btn" class="text-primary hover:underline">点击加入服务器群聊</button>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mr-4 shrink-0">
                                    <i class="fa fa-play-circle text-primary"></i>
                                </div>
                                <div>
                                    <h4 class="text-white font-medium mb-1">哔哩哔哩主页</h4>
                                    <button id="bilibili-btn" class="text-primary hover:underline">查看腐竹主页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚区域 -->
    <footer class="bg-dark py-12 border-t border-gray-800">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
                <div>
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center">
                            <i class="fa fa-cubes text-xl text-white"></i>
                        </div>
                        <span class="text-xl font-bold text-white">我的世界服务器</span>
                    </div>
                    <p class="text-white/60 mb-6">
                        提供舒适的游戏体验，让每一位玩家都能在这里找到属于自己的乐趣。
                    </p>
                </div>
                
                <div>
                    <h4 class="text-white font-semibold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="#home" class="text-white/60 hover:text-primary transition-colors duration-300">首页</a></li>
                        <li><a href="#servers" class="text-white/60 hover:text-primary transition-colors duration-300">服务器</a></li>
                        <li><a href="#about" class="text-white/60 hover:text-primary transition-colors duration-300">关于我们</a></li>
                        <li><a href="#contact" class="text-white/60 hover:text-primary transition-colors duration-300">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-semibold mb-6">服务器</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-white/60 hover:text-primary transition-colors duration-300">生存服务器</a></li>
                        <li><a href="#" class="text-white/60 hover:text-primary transition-colors duration-300">生存服务器</a></li>
                        <li><a href="rule.html" class="text-white/60 hover:text-primary transition-colors duration-300">服务器规则</a></li>
                        <li><a href="community.html" class="text-white/60 hover:text-primary transition-colors duration-300">玩家社区</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-semibold mb-6">社交链接</h4>
                    <div class="space-y-3">
                        <button id="footer-qq-btn" class="flex items-center text-white/60 hover:text-primary transition-colors duration-300">
                            <i class="fa fa-qq mr-2"></i> QQ群聊
                        </button>
                        <a href="#" id="footer-bilibili-btn" class="flex items-center text-white/60 hover:text-primary transition-colors duration-300">
                            <i class="fa fa-play-circle mr-2"></i> 哔哩哔哩
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // QQ群聊选择
        document.getElementById('qq-group-btn').addEventListener('click', function() {
            const serverChoice = prompt('请选择要进入的服务器群：\n1: 1016088265\n2: 1040592843');
            if (serverChoice === '1') {
                alert('服务器1群号：1016088265\n请复制群号并在QQ中搜索加入');
            } else if (serverChoice === '2') {
                alert('服务器2群号：1040592843\n请复制群号并在QQ中搜索加入');
            } else if (serverChoice !== null) {
                alert('请输入有效的服务器编号（1或2）');
            }
        });

        // 页脚QQ按钮
        document.getElementById('footer-qq-btn').addEventListener('click', function() {
            document.getElementById('qq-group-btn').click();
        });

        // 哔哩哔哩主页选择
        document.getElementById('bilibili-btn').addEventListener('click', function() {
            const serverChoice = prompt('请选择要查看的服务器腐竹主页：\n1: 服务器1腐竹\n2: 服务器2腐竹');
            if (serverChoice === '1') {
                window.open('https://space.bilibili.com/3546902607956185', '_blank');
            } else if (serverChoice === '2') {
                window.open('https://space.bilibili.com/3546901930576012', '_blank');
            } else if (serverChoice !== null) {
                alert('请输入有效的服务器编号（1或2）');
            }
        });

        // 页脚哔哩哔哩按钮
        document.getElementById('footer-bilibili-btn').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('bilibili-btn').click();
        });

        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('bg-dark/95');
                navbar.classList.remove('bg-transparent');
            } else {
                navbar.classList.remove('bg-dark/95');
            }
        });
    </script>
</body>
</html>
